<template>
  <!--height 固定表头-->
  <!--border 边框-->
    <div class="add-container">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="add-panel"
        label-position="left"
      >
        <el-form-item label="成员账号:" prop="account">
          <el-input v-model="ruleForm.account" clearable></el-input>
        </el-form-item>
        <el-form-item label="2343成员姓名:" prop="name">
          <el-input v-model="ruleForm.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="243邮箱地址:" prop="emailAddress">
          <el-input v-model="ruleForm.emailAddress" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属部门:" prop="department">
          <el-select
            class="selectClass"
            v-model="selectValue"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.selectValue"
              :label="item.label"
              :value="item.selectValue"
            >
            </el-option>
          </el-select>
          <!-- <br /> -->
          <p class="el-select-tag">选择所属部门后默认继承部门权限，可在成员列表中单独设置权限</p>
        </el-form-item>
        <el-form-item label="登录密码:" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注信息:" prop="note">
          <el-input
            type="textarea"
            v-model="ruleForm.note"
            style="width: 350px"
            :clearable="true"
            placeholder="请输入内容"
            :autosize="{ minRows: 2, maxRows: 6}"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- <el-button class="sub-btn" @click="submitForm" size="medium"
        >提交</el-button
      > -->
    </div>
</template>

<script>
export default {
  data() {
    //验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      //验证邮箱的正则表达式
      // const regEmail =/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;

      if (regEmail.test(value)) {
        //合法的邮箱
        return cb();
      }
      cb(new Error("请输入合法的邮箱"));
    };
    //密码校验
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        account: "",
        name: "",
        emailAddress: "",
        department: "",
        pass: "",
        checkPass: "",
        note: "",
      },
      options: [
        {
          selectValue: "租户管理1部",
          label: "租户管理1部",
        },
        {
          selectValue: "租户管理2部",
          label: "租户管理2部",
        },
        {
          selectValue: "租户管理3部",
          label: "租户管理3部",
        },
      ],
      selectValue: "",
      rules: {
        account: [
          { required: true, message: "请输入成员账号", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "请输入成员姓名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        emailAddress: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
          { validator: checkEmail, trigger: "blur" },
        ],
        department: [
          { required: true, message: "请输入所属部门", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
          { validator: validatePass, trigger: "blur" },
        ],
        checkPass: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
          { validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      console.log("您提交了表单");
    },
  },
};
</script>

<style lang="scss">
/*.el-table-column .label {*/
/*    align-content: center;*/
/*}*/

.add-member-main {
  margin-top: 20px;
  height: 100%;
  text-align: center;
  .main-body {
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    margin: 0 auto;
    .body-form {
      width: 40%;
      margin: 0 auto;
      padding-top: 80px;
      padding-bottom: 80px;
      .add-form {
          margin-bottom: 40px;
          .el-select-tag{
              color: #ACACAC;
              font-size: 10px;
          }
        .el-input {
          width: 350px;
          height: 40px;
        }
        .el-form-item {
          margin-left: 50px;
        }

        .el-form-item__label {
          width: 100px;
          font-weight: 500;
          font-size: 13px;
        }
        .el-form-item__content {
          text-align: left;
        }

        .el-input.is-disabled .el-input__inner {
          height: 40px;
          color: #000000;
        }

        .el-input__inner {
          height: 40px;
        }
      }
      .sub-btn {
        // margin-left: 22%;
        background-color: #1abc9c;
        color: #ffffff;
        width: 100px;
      }
    }
  }
}
/*.tag1 {*/
/*    float: left;*/
/*}*/

// .add {
//   float: left;
//   padding-top: 5px;
// }

// .btn2 {
//   float: right;
//   margin-right: 30px;
// }
// .main-body1 {
//   border: solid 1px #e4e4e4;
//   min-height: 80px;
//   background-color: #ffffff;
//   padding-top: 10px;
//   padding-left: 10px;
// }
// /*.body-form {*/
// /*    text-align: left;*/
// /*    height: 50px;*/
// /*}*/

// .tag {
//   font-size: 13px;
//   font-weight: bold;
//   height: 45px;
//   /* line-height: 40px; */
//   border: solid 1px #e4e4e4;
//   padding-left: 15px;
//   text-align: left;
//   background-color: #f3f3f3;
// }

// .demo-ruleForm {
//   margin-left: 25%;
// }
/* .el-form-item__content {
    text-align: left;
    width: 35%;
} */
</style>

